<template>
  <div class="w-full h-full p-60px border">
    <template v-if="!props.dbInfo"><Empty description="请选择应用和租户"></Empty> </template>

    <template v-else>
      <Descriptions title="数据库信息" layout="vertical" bordered>
        <DescriptionsItem label="生效时间">{{ props.dbInfo.effectiveTime }}</DescriptionsItem>
        <DescriptionsItem label="过期时间">{{ props.dbInfo.expireTime }}</DescriptionsItem>
        <DescriptionsItem label="状态">{{ props.dbInfo.status }}</DescriptionsItem>
        <DescriptionsItem label="付费方式">{{
          props.dbInfo.paymentType === 'prePaid' ? '包周期' : '按需付费'
        }}</DescriptionsItem>
        <DescriptionsItem label="是否开启消息通知" :span="2">{{
          props.dbInfo.notificationEnabled === 'false' ? '否' : '是'
        }}</DescriptionsItem>
      </Descriptions>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { Empty, Descriptions, DescriptionsItem } from 'ant-design-vue';
const props = defineProps(['dbInfo']);
</script>

<style lang="less" scoped></style>
